<!--
 * @Description: 主页
 * @Author: tianhao
 * @Date: 2022-07-01 09:10:40
 * @LastEditors: tianhao
 * @LastEditTime: 2022-07-08 09:34:23
-->
<template>
  <div class="home">
    <div class="top">
      <div class="yp">有品</div>
      <div class="search">
        <van-search
          shape="round"
          background="#8B7500"
          input-align="center"
          placeholder="搜索"
        />
      </div>
      <div class="icon"><van-icon class="myIcon" name="location-o" /></div>
    </div>
    <!-- :navigation="true" -->
    <swiper
      class="mySwiper"
      :slides-per-view="1"
      :space-between="50"
      :loop="true"
      :pagination="{
        clickable: false,
      }"
      :autoplay="{
        delay: 2000,
        disableOnInteraction: false,
      }"
      :modules="modules"
    >
      <swiper-slide>
        <img
          src="https://res.youpin.mi-img.com/youpinoper/42a569a0_ced6_4bcf_8833_a50a49fbf666.jpeg@base@tag=imgScale&h=320&w=750"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="https://res.youpin.mi-img.com/youpinoper/8f6eabc4_ff0c_4c44_b3c6_20edd700ace5.jpeg@base@tag=imgScale&h=320&w=750"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="https://res.youpin.mi-img.com/youpinoper/004547c4_6733_4030_9857_60906e7e9f06.jpeg@base@tag=imgScale&h=320&w=750"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          src="https://res.youpin.mi-img.com/youpinoper/8b6d166c_bbaa_47f6_b7a3_ec900a7f37f9.jpeg@base@tag=imgScale&h=320&w=750"
          alt=""
        />
      </swiper-slide>
    </swiper>
    <div class="myGrid" v-for="(item, index) in myGridData0" :key="index">
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="(item, index) in item.items"
          :key="index"
          @click="toTypePage(index)"
        >
          <van-image class="img" :src="item.img" />
          <div class="name">{{ item.name }}</div>
        </van-grid-item>
      </van-grid>
    </div>

    <img
      class="img1"
      src="https://img.youpin.mi-img.com/jianyu/8c5e643d_8a7e_43ca_876c_562257e13d15.png@base@tag=imgScale&h=371&m=1&q=80&w=750"
      alt="" @click="toTypePage(index)"
    />
    <div class="zhongChou" @click="toTypePage(index)">
      <div class="zc">小米有品众筹</div>
      <div class="zc2">5款众筹中 ></div>
      <div class="card1">
        <div class="cardWord1">水上动力浮<br>板<br>
        <div class="orange">￥799</div>
        <div class="red">96</div>
        <div class="cardWord2">人支持</div>
        </div>
        <img class="img2" src="https://img.youpin.mi-img.com/shop-fe/e5d73589_e67d_4ade_9637_f20b91487a5c.png@base@tag=imgScale&h=152&w=152" alt="">
        <div class="cardWord3">完成度</div>
        <div class="red1">10%</div>
        </div>
      <div class="card2">
        <img class="img3" src="https://img.youpin.mi-img.com/shop-fe/f2d381ff_89e8_49e3_8177_03af5bce956a.png@base@tag=imgScale&h=150&w=150" alt="" >
      <div class="cardWord4">YUPP健身</div>
      <div class="orange2">￥1568起</div>
      </div>
      <div class="card3">
        <img class="img4" src="https://img.youpin.mi-img.com/shop-fe/be8ccd48_6ecd_441b_be69_ef697ecc5437.png@base@tag=imgScale&h=150&w=150" alt="">
      <div class="cardWord5">智能电子护嗓</div>
      <div class="orange3">￥299</div>
      </div>
    </div>
    <div class="miaoSha" @click="toTypePage(index)">
      <div class="zc">有品秒杀</div>
      <div class="jiShi">
      <van-count-down :time="9999999999">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template>
</van-count-down>
</div>
      <div class="zc2">更多 ></div>
      <swiper
      class="mySwiper2"
      :slides-per-view="3"
      :space-between="20"
      :loop="true"
      :modules="modules"
    >
      <swiper-slide>
        <div class="bg">
        <img
          src="https://img.youpin.mi-img.com/shop-fe/38a73846_d211_46d9_94f3_ea88b41b8079.png@base@tag=imgScale&h=186&w=186"
          alt=""
        />
        <div class="rred">
        ￥12.8起
        </div>
        </div>
      </swiper-slide>
      <swiper-slide>
         <div class="bg">
        <img
          src="https://img.youpin.mi-img.com/800_pic/b3b20bc88a136946dcea6c69e4aa006f.png@base@tag=imgScale&h=186&w=186"
          alt=""
        />
        <div class="rred">
        ￥79起
        </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="bg">
        <img
          src="https://img.youpin.mi-img.com/shop-fe/fc9ea926_b5e6_43d3_ae00_2c1d3507500a.png@base@tag=imgScale&h=186&w=186"
          alt=""
        />
        <div class="rred">
        ￥14.9起
        </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="bg">
        <img
          src="https://img.youpin.mi-img.com/shopmain/3aadeb532349d2eae7bf3d121e63a956.png@base@tag=imgScale&h=186&w=186"
          alt=""
        />
        <div class="rred">
        ￥299起
        </div>
        </div>
      </swiper-slide>
    </swiper>
    </div><br><br>
    <van-divider
  :style="{ color: '#8B8989', borderColor: '#8B8989', padding: '0 16px' }"
>
 更多好物，敬请期待
</van-divider>
  </div>
</template>

<script setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// 除了Swiper, SwiperSlide基础组件 其他的功能需要单独导入
// eslint-disable-next-line no-unused-vars
import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from "swiper";
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import { createApp } from 'vue';

// eslint-disable-next-line no-unused-vars
import { NavBar,Sidebar,SidebarItem,Toast,Grid,GridItem,Card,ConfigProvider,CountDown } from "vant";

import { useRouter } from "vue-router";

// Import Swiper styles

// 使用setup语法 需要创建这样一个变量和组对应 否则就无法使用对用的功能
const modules = [Autoplay, Navigation, Pagination, Scrollbar, A11y];
const router = useRouter();



const app = createApp();
app.use(ConfigProvider);

const myGridData0 = [
  {
    items: [
      {
        img: "https://img.youpin.mi-img.com/ferriswheel/aa807bb8_acab_41ff_b419_2e391bb26622.png?w=180&h=180",
        name: "上新精选",
      },
      {
        img: "https://img.youpin.mi-img.com/ferriswheel/599756a6_037d_46dc_b6f8_b5ced6879da1.png?w=180&h=180",
        name: "小米众筹",
      },
      {
        img: "https://img.youpin.mi-img.com/ferriswheel/7b76188c_f8fc_41d5_9845_92303f06006d.png?w=180&h=180",
        name: "有品秒杀",
      },
      {
        img: "https://img.youpin.mi-img.com/ferriswheel/d5bd4a63_0270_4c22_b1a2_2c5f177d6440.png?w=180&h=180",
        name: "生活优选",
      },
      {
        img: "https://img.youpin.mi-img.com/ferriswheel/7dc948e7_8591_4478_9920_eae0ff3a209a.png?w=180&h=180",
        name: "小米自营",
      },
    ],
  },
];
// eslint-disable-next-line no-unused-vars

const toTypePage = (index) => {
  console.log("🤡 CC - toTypePage - index", index);
  sessionStorage.setItem("typePage", "1");
  router.push({ name: "type" });
};
</script>

<style lang="less" scoped>
.home{
  background-color: #DCDCDC;
}

.top {
  background-color: #8B7500;
}
.top .yp {
  margin-left: 5px;
  margin-top: 12px;
  font-size: 25px;
  float: left;
  color: #e0ffff;
  font-family: serif;
  letter-spacing: -3px;
}
.top .search {
  width: 350px;
}
.top .icon {
  margin-top: -42px;
  float: right;
}
.myIcon {
  font-size: 28px;
  color: #e0ffff;
}

.mySwiper {
  img {
    width: 380px;
  }
  :deep(.swiper-pagination) {
    text-align: right;
    left: -16px;
    bottom: 22px;
  }
  :deep(.swiper-pagination-bullet) {
    width: 12px;
    height: 3px;
    background-color: white;
    border-radius: 0;
    opacity: 1;
  }
  :deep(.swiper-pagination-bullet-active) {
    height: 12px;
  }
}

.myGrid{
  --van-grid-item-content-background-color:#DCDCDC;
  .img{
    width: 60px;
    height: 60px;
  }
  .name{
    font-size: 15px;
  }
}


.img1 {
  width: 370px;
  height: 190px;
  border-radius: 10px;
  margin-top: 10px;
}
.zhongChou{
  margin: 10px 10px;
  background-color: white;
  width: 350px;
  height: 150px;
  border-radius: 10px;
  position: relative;
}
.zc{
  height: 25px;
  float: left;
  margin: 10px 10px;
  font-size: 20px;
}
.zc2{
  height: 25px;
  float: right;
  margin-right: 10px;
  margin-top: 15px;
  color: #BEBEBE;
  font-size: 10px;
}
.card1{
  background-color: 		#F5F5DC;
  width: 162px;
  height: 100px;
  position:absolute;top:40px;left:10px;
  border-radius: 10px;
}

.cardWord1{
  font-size: 10px;
  position:absolute;top:10px;left:10px;
}
.cardWord2{
  font-size: 10px;
 position:absolute;top:72.5px;left:15px;
 color: gray;
}
.orange{
  color: orange;
  position:absolute;top:40px;left:-3px;
  font-size: 20px;
}
.red{
  color: red;
  position:absolute;top:74px;left:-1px;
}
.img2{
  width: 76px;
  height: 76px;
  margin-left: 85px;
}
.cardWord3{
  font-size: 10px;
  position:absolute;top:82px;left:100px;
  color: gray;
}
.red1{
  font-size: 10px;
  position:absolute;top:83px;left:136px;
  color: red;
}

.img3{
  width: 76px;
  height: 76px;
  position:absolute;top:40px;left:180px;
}
.cardWord4{
  font-size: 10px;
  position:absolute;top:110px;left:190px;
}

.orange2{
   color: orange;
  position:absolute;top:125px;left:190px;
  font-size: 10px;
  font-weight: bold;
}
.img4{
  width: 76px;
  height: 76px;
  position:absolute;top:40px;left:270px;
}
.cardWord5{
  font-size: 10px;
  position:absolute;top:110px;left:270px;
}

.orange3{
   color: orange;
  position:absolute;top:125px;left:290px;
  font-size: 10px;
  font-weight: bold;
}
.miaoSha{
  margin: 10px 10px;
  background-color: white;
  width: 350px;
  height: 190px;
  border-radius: 10px;
  position: relative;
}
.mySwiper2{
  
  height: 150px;
  width: 350px;
  img{
    height: 110px;
    width: 110px;
  }
}
.bg{
  height: 110px;
    width: 110px;
    background-color: #EEE9E9;
}
.rred{
  color: red;
  font-size: 15px;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  .jiShi{
    width: 100px;
    height: 25px;
    position:absolute;top:12px;left:130px;
  }
</style>
